<template>
	<el-card class="head-card">
		<el-form label-width="80px" :inline="true" :model="searchForm">
			<el-form-item label="一级分类">
				<el-select
					placeholder="请选择一级分类"
					clearable
					v-model="searchForm.firstLevel"
					@change="getSecondLevelCategory"
					:disabled="!props.showAttrTable"
				>
					<template v-for="c in firstLevel" :key="c.id">
						<el-option :label="c.name" :value="c.id" />
					</template>
				</el-select>
			</el-form-item>
			<el-form-item label="二级分类">
				<el-select
					placeholder="请选择一级分类"
					clearable
					:disabled="!props.showAttrTable"
					v-model="searchForm.secondLevel"
					@change="getThirdLevelCategory"
				>
					<template v-for="c in secondLevel" :key="c.id">
						<el-option :label="c.name" :value="c.id" />
					</template>
				</el-select>
			</el-form-item>
			<el-form-item label="三级分类">
				<el-select
					placeholder="请选择一级分类"
					clearable
					:disabled="!props.showAttrTable"
					v-model="searchForm.thirdLevel"
					@change="getAttrByCategory"
				>
					<template v-for="c in thirdLevel" :key="c.id">
						<el-option :label="c.name" :value="c.id" />
					</template>
				</el-select>
			</el-form-item>
		</el-form>
	</el-card>
</template>
<script lang="ts" setup name="search-card">
	import type { AttrForm, Category, SearchForm } from '@/api/product/attr/type';
	import { reqGetNextLevelCategory, reqGetAttr } from '@/api/product/attr';
	import { reactive, ref, onMounted, defineEmits } from 'vue';
	let emit = defineEmits();
	let props = defineProps<{ attrForm: AttrForm; showAttrTable: boolean }>();
	// 一级分类
	let firstLevel = ref<Category[]>([]);
	// 二级分类
	let secondLevel = ref<Category[]>([]);
	// 三级分类
	let thirdLevel = ref<Category[]>([]);
	// 搜索表单
	let searchForm = reactive<SearchForm>({
		firstLevel: undefined,
		secondLevel: undefined,
		thirdLevel: undefined,
	});
	// 根据id获取下一级分类
	let getNextLevelCategory = async (id: number = 0): Promise<Category[]> => {
		let { code, message, data } = await reqGetNextLevelCategory(id);
		if (code != 200) {
			ElMessage.error({ message: message });
			return Promise.reject();
		}
		return data;
	};
	let getSecondLevelCategory = async (id: number) => {
		secondLevel.value = await getNextLevelCategory(id);
		emit('send-attrs', []);
		props.attrForm.thirdLevel = undefined;
		searchForm.secondLevel = undefined;
		searchForm.thirdLevel = undefined;
	};
	let getThirdLevelCategory = async (id: number) => {
		thirdLevel.value = await getNextLevelCategory(id);
		searchForm.thirdLevel = undefined;
		props.attrForm.thirdLevel = undefined;
	};
	// 选择完三级分类后，发送请求
	let getAttrByCategory = async (id: number) => {
		let { code, message, data } = await reqGetAttr(id);
		if (code == 200) {
			props.attrForm.thirdLevel = searchForm.thirdLevel;
			emit('send-attrs', data);
		} else {
			ElMessage.error({ message: message });
		}
	};
	onMounted(async () => {
		firstLevel.value = await getNextLevelCategory();
	});
</script>
<style scoped lang="scss" scope>
	.el-select {
		width: 200px;
	}
	.el-form-item{
		margin-bottom: 0px;
	}
</style>
